<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="add">增加</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        num: 0,
      }
    },
    methods: {
      add() {
        this.num++;
      },
    },
    beforeCreate() {
      console.log('beforeCreate', this.num);
    },
    created() {
      console.log('created', this.num);
    },
    beforeMount() {
      console.log('beforeMount', this.num);
    },
    mounted() {
      console.log('mounted', this.num);
    },
    beforeUpdate() {
      console.log('beforeUpdate', this.num);
    },
    updated() {
      console.log('updated', this.num);
    },
    beforeDestroy() {
      console.log('beforeDestroy', this.num);
    },
    destroyed() {
      console.log('destroyed', this.num);
    }
  }
</script>

<style>
  button {
    padding: 10px 20px;
    margin: 5px 10px;
    background-color: #42b983;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #34985f;
  }
  button:active {
    background-color: #29804a;
  }
</style>